<template>
  <div class="markdown-content" v-html="renderedMarkdown" :key="contentKey" :data-content-length="props.content.length"></div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import MarkdownIt from 'markdown-it'
import hljs from 'highlight.js'

// 引入代码高亮样式
import 'highlight.js/styles/github.css'

interface Props {
  content: string
}

const props = defineProps<Props>()

// 🔧 强制更新key，确保所有代码块都能实时显示
const contentKey = computed(() => {
  const content = props.content
  
  // 🔥 关键修复：基于内容本身生成唯一key，每个字符变化都会触发更新
  const contentLength = content.length
  const contentHash = content.split('').reduce((hash, char, index) => {
    // 简单但有效的字符串哈希算法
    return hash + char.charCodeAt(0) * (index + 1)
  }, 0)
  
  // 🔧 检测代码块状态
  const openCodeBlocks = (content.match(/```\w*/g) || []).length
  const closeCodeBlocks = (content.match(/^```$/gm) || []).length
  const hasUnfinishedCodeBlock = openCodeBlocks > closeCodeBlocks
  
  // 🔥 使用内容的最后几个字符作为key的一部分，确保每次变化都能检测到
  const lastChars = content.slice(-10).replace(/[^a-zA-Z0-9]/g, '_')
  
  return `${contentLength}_${contentHash}_${openCodeBlocks}_${hasUnfinishedCodeBlock ? 'STREAM' : 'DONE'}_${lastChars}`
})

// 配置 markdown-it 实例
const md: MarkdownIt = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  highlight: function (str: string, lang: string): string {
    // 🔥 流式渲染优化：简化高亮逻辑，避免阻塞
    if (!lang) {
      return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`
    }
    
    // 🔧 语言映射：快速映射到支持的语言
    const languageMap: Record<string, string> = {
      'vue': 'html', 'svelte': 'html',
      'jsx': 'javascript', 'tsx': 'typescript', 
      'ts': 'typescript', 'js': 'javascript',
      'py': 'python', 'sh': 'bash'
    }
    
    const actualLang = languageMap[lang.toLowerCase()] || lang.toLowerCase()
    
    // 🔥 快速高亮：优先使用指定语言，失败时立即回退
    try {
      if (hljs.getLanguage(actualLang)) {
        const highlighted = hljs.highlight(str, { 
          language: actualLang, 
          ignoreIllegals: true 
        }).value
        return `<pre class="hljs language-${lang}"><code class="language-${lang}">${highlighted}</code></pre>`
      }
    } catch (error) {
      // 高亮失败，立即回退到纯文本
    }
    
    // 快速回退：直接返回转义的文本，不进行自动检测
    return `<pre class="hljs language-${lang}"><code class="language-${lang}">${md.utils.escapeHtml(str)}</code></pre>`
  },
})

// 🔧 支持流式渲染的Markdown处理
const renderedMarkdown = computed(() => {
  let content = props.content
  
  // 🔥 调试：检查原始内容
  if (process.env.NODE_ENV === 'development' && content.includes('```')) {
    console.log(`📥 原始内容长度: ${content.length}, 包含代码块: ${content.includes('```')}`)
  }
  
  // 🔥 立即处理不完整的代码块，确保实时显示
  const processedContent = handleIncompleteCodeBlocks(content)
  
  // 🔧 调试：检查处理后的内容
  if (process.env.NODE_ENV === 'development' && processedContent !== content) {
    console.log(`🔄 内容已处理: ${content.length} -> ${processedContent.length}`)
  }
  
  try {
    const rendered = md.render(processedContent)
    
    // 🔧 调试信息：每次渲染都记录
    if (process.env.NODE_ENV === 'development') {
      const originalHasUnfinished = (content.match(/```\w*/g) || []).length > (content.match(/^```$/gm) || []).length
      const processedHasUnfinished = (processedContent.match(/```\w*/g) || []).length > (processedContent.match(/^```$/gm) || []).length
      console.log(`🎨 渲染完成 [${Date.now()}]: 原始=${originalHasUnfinished ? '未完成' : '完成'}, 处理后=${processedHasUnfinished ? '未完成' : '完成'}`)
    }
    
    return rendered
  } catch (error) {
    console.error('Markdown渲染错误:', error)
    // 如果渲染失败，返回原始内容（转义HTML）
    return md.utils.escapeHtml(processedContent).replace(/\n/g, '<br>')
  }
})

/**
 * 处理不完整的代码块，使其能够实时显示
 * 🔥 简化逻辑，确保所有代码块都能立即实时显示
 */
const handleIncompleteCodeBlocks = (text: string): string => {
  // 🔧 简化的实时流式处理逻辑
  const lines = text.split('\n')
  let inCodeBlock = false
  let codeBlockLang = ''
  
  for (let i = 0; i < lines.length; i++) {
    const line = lines[i]
    const trimmedLine = line.trim()
    
    if (trimmedLine.startsWith('```')) {
      if (!inCodeBlock) {
        // 开始代码块
        inCodeBlock = true
        codeBlockLang = trimmedLine.substring(3).trim()
      } else {
        // 结束代码块
        inCodeBlock = false
        codeBlockLang = ''
      }
    }
  }
  
  // 🔥 关键修复：如果有未闭合的代码块，立即添加临时结束标记，无需等待完整内容
  if (inCodeBlock && codeBlockLang) {
    if (process.env.NODE_ENV === 'development') {
      console.log(`⚡ 检测到未闭合的${codeBlockLang}代码块，立即添加结束标记以实现实时显示`)
    }
    
    // 🔧 立即添加流式指示器和结束标记，不进行任何内容完整性检查
    const streamingIndicator = getStreamingIndicator(codeBlockLang)
    return text + '\n' + streamingIndicator + '\n```'
  }
  
  // 如果代码块已经完整，直接返回原文本
  return text
}

/**
 * 根据代码语言返回合适的流式指示器
 */
const getStreamingIndicator = (lang: string): string => {
  const indicators: Record<string, string> = {
    'javascript': '// ⏳ 正在生成中...',
    'typescript': '// ⏳ 正在生成中...',
    'js': '// ⏳ 正在生成中...',
    'ts': '// ⏳ 正在生成中...',
    'vue': '<!-- ⏳ 正在生成中... -->',
    'html': '<!-- ⏳ 正在生成中... -->',
    'xml': '<!-- ⏳ 正在生成中... -->',
    'css': '/* ⏳ 正在生成中... */',
    'scss': '/* ⏳ 正在生成中... */',
    'sass': '/* ⏳ 正在生成中... */',
    'less': '/* ⏳ 正在生成中... */',
    'python': '# ⏳ 正在生成中...',
    'py': '# ⏳ 正在生成中...',
    'java': '// ⏳ 正在生成中...',
    'c': '// ⏳ 正在生成中...',
    'cpp': '// ⏳ 正在生成中...',
    'go': '// ⏳ 正在生成中...',
    'rust': '// ⏳ 正在生成中...',
    'php': '// ⏳ 正在生成中...',
    'ruby': '# ⏳ 正在生成中...',
    'bash': '# ⏳ 正在生成中...',
    'sh': '# ⏳ 正在生成中...',
    'sql': '-- ⏳ 正在生成中...',
    'json': '',
    'yaml': '# ⏳ 正在生成中...',
    'yml': '# ⏳ 正在生成中...',
    'markdown': '<!-- ⏳ 正在生成中... -->',
    'md': '<!-- ⏳ 正在生成中... -->'
  }
  
  return indicators[lang.toLowerCase()] || '// ⏳ 正在生成中...'
}
</script>

<style scoped>
.markdown-content {
  line-height: 1.6;
  color: #333;
  word-wrap: break-word;
}

/* 全局样式，影响 v-html 内容 */
.markdown-content :deep(h1),
.markdown-content :deep(h2),
.markdown-content :deep(h3),
.markdown-content :deep(h4),
.markdown-content :deep(h5),
.markdown-content :deep(h6) {
  margin: 1.5em 0 0.5em 0;
  font-weight: 600;
  line-height: 1.25;
}

.markdown-content :deep(h1) {
  font-size: 1.5em;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.3em;
}

.markdown-content :deep(h2) {
  font-size: 1.3em;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.3em;
}

.markdown-content :deep(h3) {
  font-size: 1.1em;
}

.markdown-content :deep(p) {
  margin: 0.8em 0;
}

.markdown-content :deep(ul),
.markdown-content :deep(ol) {
  margin: 0.8em 0;
  padding-left: 1.5em;
}

.markdown-content :deep(li) {
  margin: 0.3em 0;
}

.markdown-content :deep(blockquote) {
  margin: 1em 0;
  padding: 0.5em 1em;
  border-left: 4px solid #ddd;
  background-color: #f9f9f9;
  color: #666;
}

.markdown-content :deep(code) {
  background-color: #f1f1f1;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.9em;
}

.markdown-content :deep(pre) {
  background-color: #f8f8f8;
  border: 1px solid #e1e1e1;
  border-radius: 6px;
  padding: 1em;
  overflow-x: auto;
  margin: 1em 0;
}

.markdown-content :deep(pre code) {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 0.9em;
  line-height: 1.4;
}

.markdown-content :deep(table) {
  border-collapse: collapse;
  margin: 1em 0;
  width: 100%;
}

.markdown-content :deep(table th),
.markdown-content :deep(table td) {
  border: 1px solid #ddd;
  padding: 0.5em 0.8em;
  text-align: left;
}

.markdown-content :deep(table th) {
  background-color: #f5f5f5;
  font-weight: 600;
}

.markdown-content :deep(table tr:nth-child(even)) {
  background-color: #f9f9f9;
}

.markdown-content :deep(a) {
  color: #1890ff;
  text-decoration: none;
}

.markdown-content :deep(a:hover) {
  text-decoration: underline;
}

.markdown-content :deep(img) {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 0.5em 0;
}

.markdown-content :deep(hr) {
  border: none;
  border-top: 1px solid #eee;
  margin: 1.5em 0;
}

/* 代码高亮样式优化 */
.markdown-content :deep(.hljs) {
  background-color: #f8f8f8 !important;
  border-radius: 6px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.9em;
  line-height: 1.4;
}

/* 特定语言的代码块样式 */
.markdown-content :deep(.hljs-keyword) {
  color: #d73a49;
  font-weight: 600;
}

.markdown-content :deep(.hljs-string) {
  color: #032f62;
}

.markdown-content :deep(.hljs-comment) {
  color: #6a737d;
  font-style: italic;
}

.markdown-content :deep(.hljs-number) {
  color: #005cc5;
}

.markdown-content :deep(.hljs-function) {
  color: #6f42c1;
}

.markdown-content :deep(.hljs-tag) {
  color: #22863a;
}

.markdown-content :deep(.hljs-attr) {
  color: #6f42c1;
}

.markdown-content :deep(.hljs-title) {
  color: #6f42c1;
  font-weight: 600;
}

/* Vue等特殊语言的代码块样式优化 */
.markdown-content :deep(.language-vue) {
  border-left: 4px solid #4fc08d;
  background: linear-gradient(135deg, #f0f9f4 0%, #edf9f0 100%);
}

.markdown-content :deep(.language-jsx),
.markdown-content :deep(.language-tsx) {
  border-left: 4px solid #61dafb;
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
}

.markdown-content :deep(.language-vue .hljs-tag) {
  color: #4fc08d;
  font-weight: 600;
}

.markdown-content :deep(.language-jsx .hljs-tag),
.markdown-content :deep(.language-tsx .hljs-tag) {
  color: #61dafb;
  font-weight: 600;
}

/* 确保流式渲染期间的平滑过渡 */
.markdown-content :deep(.language-vue pre),
.markdown-content :deep(.language-jsx pre),
.markdown-content :deep(.language-tsx pre) {
  transition: all 0.1s ease-out;
}

/* 流式指示器样式 */
.markdown-content :deep(.hljs) {
  position: relative;
}

/* 为正在流式传输的代码块添加动画效果 */
.markdown-content :deep(pre) {
  transition: box-shadow 0.3s ease;
}

.markdown-content :deep(pre:has(code:contains('⏳ 正在生成中'))),
.markdown-content :deep(pre code:contains('⏳ 正在生成中')) {
  animation: streamingGlow 2s ease-in-out infinite alternate;
}

@keyframes streamingGlow {
  from {
    box-shadow: 0 0 8px rgba(24, 144, 255, 0.3);
    border-left: 4px solid rgba(24, 144, 255, 0.5);
  }
  to {
    box-shadow: 0 0 16px rgba(24, 144, 255, 0.6);
    border-left: 4px solid rgba(24, 144, 255, 0.8);
  }
}

/* 流式指示器文字样式 */
.markdown-content :deep(.hljs):contains('⏳ 正在生成中') {
  opacity: 0.8;
  font-style: italic;
  color: #1890ff !important;
}

/* 错误消息样式 */
.markdown-content :deep(p:first-child) {
  /* 检测以错误表情符号开头的段落 */
}

.markdown-content :deep(p:contains('❌')),
.markdown-content :deep(p:contains('⏳')),
.markdown-content :deep(p:contains('💳')),
.markdown-content :deep(p:contains('🛡️')),
.markdown-content :deep(p:contains('🔄')),
.markdown-content :deep(p:contains('⏰')),
.markdown-content :deep(p:contains('❓')),
.markdown-content :deep(p:contains('🔌')),
.markdown-content :deep(p:contains('🌐')) {
  background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
  border: 1px solid #feb2b2;
  border-left: 4px solid #f56565;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 16px 0;
  color: #742a2a;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(245, 101, 101, 0.1);
}

/* 特定错误类型的颜色区分 */
.markdown-content :deep(p:contains('⏳')) {
  background: linear-gradient(135deg, #fffbf0 0%, #fef5e7 100%);
  border-color: #fed7aa;
  border-left-color: #f59e0b;
  color: #92400e;
}

.markdown-content :deep(p:contains('🔄')) {
  background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%);
  border-color: #93c5fd;
  border-left-color: #3b82f6;
  color: #1e40af;
}

.markdown-content :deep(p:contains('🌐')) {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #86efac;
  border-left-color: #10b981;
  color: #047857;
}

/* 错误消息中的建议文本样式 */
.markdown-content :deep(p:contains('请')) {
  line-height: 1.6;
}

/* 中断提示样式 */
.markdown-content :deep(p:contains('⚠️')) {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fcd34d;
  border-left: 4px solid #f59e0b;
  border-radius: 6px;
  padding: 12px 16px;
  margin: 12px 0;
  color: #92400e;
  font-style: italic;
  font-size: 0.9em;
}
</style>